<template>
  <view>
    <view class="navigation" @tap="backref()">
      <view class="navigation_back">
        <uni-icons type="back" size="24" color="#333"></uni-icons>
      </view>
      <view class="navigation_title"> 订单详情 </view>
    </view>
    <view class="detail_con">
      <view class="order_detail_type">
        <view class="order_status">
          {{
            orderDetail.status == 2
              ? "待支付"
              : orderDetail.status == 22
              ? "已支付"
              : orderDetail.status == 3
              ? "商家已接单"
              : orderDetail.status == 4
              ? "商家已出餐"
              : orderDetail.status == 5
              ? "校外骑手接单"
              : orderDetail.status == 6
              ? "校外骑手取餐"
              : orderDetail.status == 7
              ? "校外骑手送餐"
              : orderDetail.status == 8
              ? "校外骑手送达"
              : orderDetail.status == 9
              ? "校内骑手接单"
              : orderDetail.status == 10
              ? "校内骑手取餐"
              : orderDetail.status == 11
              ? "校内骑手送餐"
              : orderDetail.status == 12
              ? "校内骑手送达"
              : orderDetail.status == 13
              ? "待评价"
              : orderDetail.status == 14
              ? "已评价"
              : orderDetail.status == 15
              ? "已取消"
              : orderDetail.status == 17
              ? "已退款"
              : ""
          }}
        </view>
        <view class="order_time" v-if="orderDetail.status == 2">
          <view style="text-align: center">
            下单时间:{{ orderDetail.createTime }}
          </view>
          <view style="text-align: center; color: red; font-size: 22rpx">
            请在15分钟内进行支付，超时将取消
          </view>
          <!-- <view style="text-align: center; color: red; font-size: 22rpx">
            预计到达时间:{{ orderDetail.createTime | addOneHour }}
          </view> -->
        </view>
      </view>

      <view class="detail_goods">
        <view class="checkout_con_bd">
          <!-- <view class="checkout_store_hd">
						<view class="checkout_store_name">
							{{goodDetail.storeName}}
						</view>
						<view class="checkout_store_phone">
							<image src="../../static/image/shop/mobile.svg" mode=""></image>
						</view>
					</view> -->
          <view class="checkout_goods">
            <view
              class="checkout_good"
              v-for="(item, index) in orderList"
              :key="index"
            >
              <view class="checkout_good_img">
                <image :src="domain + item.goodsImg" mode="aspectFill"></image>
              </view>
              <view class="checkout_good_info">
                <view class="checkout_good_name">
                  {{ item.goodsName }}
                </view>
                <view v-if="item.specSkuId" class="checkout_good_type">
                  {{ item.specSkuId }}
                </view>
                <view class="checkout_good_other">
                  <view class="checkout_good_price"> ¥{{ item.price }} </view>
                  <view class="checkout_good_num"> x{{ item.number }} </view>
                </view>
              </view>
            </view>
          </view>

          <view class="checkout_money">
            <view class="checkout_lunchbox">
              <view class="checkout_money_label"> 餐盒费 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.packAmount || 0 }}
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 配送费 </view>
              <view class="checkout_money_price">
                <!-- ¥{{ orderDetail.deliveryAmount || 0 }} -->
                0
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 服务费 </view>
              <view class="checkout_money_price">
                ¥{{
                  orderDetail.serviceAmount + orderDetail.deliveryAmount || 0
                }}
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 减免费用 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.reductionAmount || 0 }}
              </view>
            </view>
            <view class="checkout_delivery">
              <view class="checkout_money_label"> 商家满减 </view>
              <view class="checkout_money_price">
                ¥{{ orderDetail.fullReduction || 0 }}
              </view>
            </view>
          </view>
          <view class="checkout_total_price">
            <text>¥{{ orderDetail.amount }}</text>
          </view>
        </view>
      </view>

      <view class="order_btns">
        <view
          class="button"
          v-if="orderDetail.status == 1 || orderDetail.status == 2"
          @tap="cancelOrderFn()"
        >
          取消订单
        </view>
        <view
          class="button"
          v-if="orderDetail.status == 22"
          @tap="cancelOrderFn2()"
        >
          取消并退款
        </view>
        <view class="button" v-if="orderDetail.status == 2" @tap="gotoPay()">
          进行支付
        </view>
        <view
          class="button"
          v-if="orderDetail.status == 12"
          @click="gotoConfirm()"
        >
          确认收货
        </view>
        <view
          class="button"
          v-if="orderDetail.status == 13"
          @click="toEvaluate()"
        >
          评价
        </view>
      </view>

      <view class="detail_shipping">
        <view class="detail_shipping_title"> 服务信息 </view>
        <view class="detail_shipping_list">
          <view class="shipping_item" v-if="orderDetail.business">
            <view class="shipping_label"> 联系商家 </view>
            <view class="shipping_value">
              {{ orderDetail.business.userPhone }}
              <view
                class="button"
                @tap="toPhone(orderDetail.business.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="shipping_item" v-if="orderDetail.riderTwo">
            <view class="shipping_label"> 联系校外骑手 </view>
            <view class="shipping_value">
              {{ orderDetail.riderTwo.userPhone }}
              <view
                class="button"
                @tap="toPhone(orderDetail.riderTwo.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="shipping_item" v-if="orderDetail.riderOne">
            <view class="shipping_label"> 联系校内骑手 </view>
            <view class="shipping_value">
              {{ orderDetail.riderOne.userPhone }}
              <view
                class="button"
                @tap="toPhone(orderDetail.riderOne.userPhone)"
                >拨打</view
              >
            </view>
          </view>
          <view class="shipping_item">
            <view class="shipping_label"> 平台售后 </view>
            <view class="shipping_value">
              {{ servicePhone }}
              <view class="button" @tap="toPhone(servicePhone)">拨打</view>
            </view>
          </view>
        </view>
      </view>

      <view class="detail_order">
        <view class="detail_order_title"> 配送信息 </view>
        <view class="message_list">
          <view class="message_item">
            <view class="message_label"> 订单编号 </view>
            <view class="message_value">
              {{ orderDetail.orderNumber }}
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 下单时间 </view>
            <view class="message_value">
              {{ orderDetail.createTime }}
            </view>
          </view>
          <view class="message_item">
            <view class="message_label"> 备注信息 </view>
            <view class="message_value">
              {{ orderDetail.remark }}
            </view>
          </view>
          <!-- <view class="message_item">
						<view class="message_label">
							餐具
						</view>
						<view class="message_value">
							1份
						</view>
					</view> -->
        </view>
      </view>
      <view class="detail_order">
        <view class="detail_order_title"> 进程 </view>
        <uni-steps
          :options="steps"
          direction="column"
          :active="active"
        ></uni-steps>
      </view>
    </view>

    <view class="mask" v-if="cancelFlag == true"> </view>
    <view class="cancel_mask" v-if="cancelFlag == true">
      <view class="delete_title"> 确定要取消该订单吗？ </view>
      <view class="delete_btns">
        <view class="delete_cancel" @tap="cancelDelete()"> 取消 </view>
        <view class="delete_sure" @tap="sureDelete()"> 确定 </view>
      </view>
    </view>

    <view class="mask" v-if="cancelFlag2 == true"> </view>
    <view class="cancel_mask" v-if="cancelFlag2 == true">
      <view class="delete_title"> 确定要取消该订单吗？ </view>
      <view class="delete_btns">
        <view class="delete_cancel" @tap="cancelDelete2()"> 取消 </view>
        <view class="delete_sure" @tap="sureDelete2()"> 确定 </view>
      </view>
    </view>
  </view>
</template>

<script>
import server_url from "../../api/config.js";
import {
  getOrderDetail,
  pay,
  confirmComplate,
  getOrderStatus,
  cancelOrder,
  cancelOrder2,
} from "../../api/api.js";
export default {
  data() {
    return {
      steps: [],
      active: 0,
      domain: server_url,
      orderStatus: 1,
      orderDetail: {
        amount: 0,
        createTime: "",
        foodAmount: 0,
        orderNumber: "",
        packAmount: 0,
        payStatus: 0,
        reductionAmount: 0,
        remark: "",
        riderAmount: 0,
        serviceAmount: 0,
        status: 0,
        updateTime: "",
      },
      orderList: [],
      servicePhone: "",
      orderId: "",
      id: "",
      clicked: false,
      cancelFlag: false,
      cancelFlag2: false,
    };
  },
  filters: {
    addOneHour: function (specifiedTimeString) {
      let specifiedDate = new Date(specifiedTimeString);
      if (!isNaN(specifiedDate.getTime())) {
        specifiedDate.setHours(specifiedDate.getHours() + 1);
        let newTimeString = specifiedDate
          .toISOString()
          .slice(0, 19)
          .replace("T", " ");
        return newTimeString;
      } else {
        return "";
      }
    },
  },
  methods: {
    toEvaluate() {
      uni.navigateTo({
        url:
          "/pages/order/evaluate?id=" +
          this.id +
          "&orderNumber=" +
          this.orderId,
      });
    },
    cancelDelete2() {
      this.cancelFlag2 = false;
    },

    sureDelete2() {
      this.cancelFlag2 = false;
      cancelOrder2({ orderId: this.id }).then((res) => {
        uni.showToast({
          title: "取消成功",
          icon: "none",
          duration: 2000,
        });
        this.getList();
      });
    },
    cancelOrderFn2() {
      this.cancelFlag2 = true;
    },

    cancelDelete() {
      this.cancelFlag = false;
    },

    sureDelete() {
      this.cancelFlag = false;
      cancelOrder({ orderId: this.id }).then((res) => {
        uni.showToast({
          title: "取消成功",
          icon: "none",
          duration: 2000,
        });
        this.getList();
      });
    },
    cancelOrderFn() {
      this.cancelFlag = true;
    },

    toPhone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone, //要拨打的手机号
        success: (res) => {
          // console.log("调用成功")
        },
        fail: (res) => {
          // console.log('调用失败!')
        },
      });
    },
    gotoPay() {
      if (this.clicked) {
        return;
      }
      this.clicked = true;
      uni.showLoading();
      pay({
        orderNumber: this.orderId,
      }).then((ddff) => {
        let timeStamp = ddff.data.timeStamp;
        let paySign = ddff.data.paySign;
        let prepayId = ddff.data.prepayId;
        let nonceStr = ddff.data.nonceStr;
        let that = this;
        uni.requestPayment({
          provider: "wxpay",
          timeStamp: timeStamp,
          nonceStr: nonceStr,
          package: "prepay_id=" + prepayId,
          signType: "RSA",
          paySign: paySign,
          success: function (res) {
            console.log("success:" + JSON.stringify(res));
            uni.hideLoading();
            that.clicked = false;
            uni.navigateTo({
              url: "pages/index/index",
            });
          },
          fail: function (err) {
            console.log("fail:" + JSON.stringify(err));
            that.clicked = false;
            uni.hideLoading();
          },
        });
      });
    },
    gotoConfirm() {
      confirmComplate({
        orderId: this.id,
      }).then((res) => {
        uni.showToast({
          title: "取消成功",
          icon: "none",
          duration: 2000,
        });
        this.backref();
      });
    },
    backref() {
      uni.navigateBack({
        delta: 1,
      });
    },
    getDetail() {
      getOrderDetail({
        orderNumber: this.orderId,
      }).then((res) => {
        this.orderDetail = res.data.order;
        this.orderList = res.data.orderList;
        this.servicePhone = res.data.servicePhone;
      });
    },
    getStatus() {
      getOrderStatus({
        orderId: this.id,
      }).then((res) => {
        this.steps = [];
        if (res.data && res.data.length) {
          res.data.forEach((dd) => {
            let obj = {
              title: dd.content,
              desc: dd.timestamp,
            };
            this.steps.unshift(obj);
          });
          this.active = this.steps.length;
          console.log(this.steps);
        }
      });
    },
  },
  onLoad(e) {
    this.orderId = e.id;
    this.orderStatus = e.status;
    this.id = e.idd;
    this.getDetail();
    this.getStatus();
  },
};
</script>

<style lang="scss">
.button {
  width: 168rpx;
  height: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 24rpx;
  background: linear-gradient(
    180deg,
    rgba(255, 141, 26, 1) 12.5%,
    rgba(255, 195, 0, 1) 100%
  );
  border-radius: 8rpx;
  color: #ffffff;
  font-size: 26rpx;
}

page {
  background: #f9fbfc;
}

.navigation {
  width: 100%;
  height: 150rpx;
  padding: 60rpx 24rpx 0;
  text-align: center;
  position: relative;

  .navigation_back {
    position: absolute;
    top: 70rpx;
  }

  .navigation_title {
    color: #333;
    font-size: 36rpx;
    font-weight: 500;
  }
}

.order_btns {
  padding: 0 24rpx 40rpx;
  display: flex;
  margin-top: 26rpx;
  justify-content: flex-end;
  .order_cancel {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24rpx;
    border: 1rpx solid #d8d8d8;
    border-radius: 8rpx;
    color: #2e343a;
    font-size: 26rpx;
  }

  .order_pay {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24rpx;
    background-color: #2588ff;
    border-radius: 8rpx;
    color: #ffffff;
    font-size: 26rpx;
  }

  .order_again {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 24rpx;
    background-color: #2588ff;
    border-radius: 8rpx;
    color: #ffffff;
    font-size: 26rpx;
  }

  .order_again2 {
    width: 168rpx;
    height: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 24rpx;
    border: 1rpx solid #d8d8d8;
    border-radius: 8rpx;
    color: #2e343a;
    font-size: 26rpx;
  }
}
.detail_con {
  padding: 0 24rpx 40rpx;

  .order_detail_type {
    padding: 28rpx 0;
    border-radius: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;

    .order_status {
      font-size: 32rpx;
      color: #2e343a;
      font-weight: 500;
    }

    .order_time {
      color: #2e343a;
      font-size: 28rpx;
      margin-top: 20rpx;
      font-weight: 500;
    }
  }

  .detail_goods {
    padding: 0 24rpx;
    background-color: #fff;
    margin-top: 24rpx;
    border-radius: 12rpx;

    .checkout_con_bd {
      padding: 32rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-top: 20rpx;

      .checkout_store_hd {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 32rpx;
        border-bottom: 1rpx solid #e8e7e7;

        .checkout_store_name {
          font-size: 30rpx;
          color: #2e343a;
          font-weight: 700;
        }

        .checkout_store_phone {
          image {
            width: 30rpx;
            height: 30rpx;
          }
        }
      }

      .checkout_goods {
        border-bottom: 1rpx solid #e8e7e7;

        .checkout_good {
          position: relative;
          padding: 24rpx 0;
          display: flex;

          .checkout_good_img {
            image {
              width: 120rpx;
              height: 120rpx;
              border-radius: 12rpx;
            }
          }

          .checkout_good_info {
            padding-top: 15rpx;
            margin-left: 24rpx;

            .checkout_good_name {
              font-size: 28rpx;
              color: #2e343a;
              font-weight: 500;
            }

            .checkout_good_type {
              font-size: 24rpx;
              color: #9098a0;
              margin-top: 8rpx;
            }

            .checkout_good_other {
              position: absolute;
              top: 75%;
              transform: translateY(-50%);
              right: 0;
              display: flex;
              flex-direction: column;
              align-items: flex-end;

              .checkout_good_price {
                font-size: 32rpx;
                color: #333333;
                font-weight: 500;
              }

              .checkout_good_num {
                font-size: 24rpx;
                color: #9098a0;
              }
            }
          }
        }
      }

      .checkout_money {
        border-bottom: 1rpx solid #e8e7e7;

        .checkout_lunchbox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20rpx 0;
        }

        .checkout_delivery {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 20rpx;
        }

        .checkout_money_label {
          font-size: 28rpx;
          color: #9098a0;
          font-weight: 500;
        }

        .checkout_money_price {
          font-size: 28rpx;
          color: #333333;
        }
      }

      .checkout_total_price {
        padding-top: 32rpx;
        text-align: right;
        font-size: 24rpx;
        color: #2e343a;

        text {
          font-size: 32rpx;
          color: rgba(255, 141, 26, 1);
          font-weight: 500;
        }
      }
    }
  }

  .detail_shipping {
    padding: 0 24rpx;
    background-color: #fff;
    margin-top: 32rpx;
    border-radius: 12rpx;

    .detail_shipping_title {
      font-size: 32rpx;
      color: #2e343a;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .detail_shipping_list {
      padding: 16rpx 0;

      .shipping_item {
        padding: 16rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .shipping_label {
          font-size: 28rpx;
          color: #2e343a;
        }

        .shipping_value {
          font-size: 28rpx;
          color: #9098a0;
          width: 70%;
          text-align: right;
          display: flex;
          align-items: center;
          justify-content: flex-end;
        }
      }
    }
  }

  .detail_order {
    padding: 0 24rpx;
    background-color: #fff;
    margin-top: 32rpx;
    border-radius: 12rpx;

    .detail_order_title {
      font-size: 32rpx;
      color: #2e343a;
      padding: 32rpx 0;
      border-bottom: 1rpx solid #e8e7e7;
    }

    .message_list {
      padding: 16rpx 0;

      .message_item {
        padding: 16rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .message_label {
          font-size: 28rpx;
          color: #2e343a;
        }

        .message_value {
          font-size: 28rpx;
          color: #9098a0;
          width: 50%;
          text-align: right;
        }
      }
    }
  }
}
.mask {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.cancel_mask {
  position: fixed;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 610rpx;
  height: 300rpx;
  background-color: #fff;
  padding-top: 80rpx;
  border-radius: 12rpx;

  .delete_title {
    text-align: center;
    color: #2e343a;
    font-size: 32rpx;
    font-weight: 500;
  }

  .delete_btns {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 96rpx;
    border-top: 1rpx solid #ccc;
    display: flex;

    .delete_cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 96rpx;
      color: #2e343a;
      border-right: 1rpx solid #ccc;
    }

    .delete_sure {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      height: 96rpx;
      color: #2588ff;
    }
  }
}
</style>
